import React, { Component } from 'react'

import Child from './Child'

export default class App extends Component {
  constructor() {
    // console.log('constructor')
    super()
    this.state = {
      x: 0,
      y: 0,
      color: '#f00'
    }
  }

  UNSAFE_componentWillMount() {
    // console.log('UNSAFE_componentWillMount')
  }

  handleClick = () => {
    this.setState({
      color: '#6435c9'
    })
  }

  render() {
    // console.log('render')
    return (
      <div>
        hello <button onClick={this.handleClick}>changeColor</button>
        <Child 
          title={this.state.x}
          color={this.state.color}
        ></Child>
      </div>
    )
  }

  componentDidMount() {
    // console.log('componentDidMount')
    setTimeout(() => {
      this.setState({
        y: 100
      })
    }, 5000) 
  }


}
